<template>
<div>
  <el-page-header style="margin-top: 10px" @back="goBack" content="详情页面"></el-page-header>
  <!--  科室介绍-->
  <div style="padding-top: 20px; border: 1px solid beige; border-radius: 10px; margin-top: 10px;">
    <span style="font-size: 25px; margin-top: 10px; margin-left: 10px">{{ department.name }}</span>
    <div style="padding-top: 15px; margin-bottom: 10px; margin-left: 10px" class="text-wrapper">
      <span style="color: dimgrey;">医院：</span>
      <el-link type="primary" @click="$router.push({path: '/front/HosInfo',query:{hosId: hospital.id}})">{{hospital.name}}</el-link>
      <p style="font-size: 15px; width: 1100px;
        word-wrap:break-word;word-break:break-all;">
        <span style="color: dimgrey;">简介：</span>{{ department.content }}</p><br />
    </div>
  </div>

<!--  有排班的医生-->
  <h2>排班医生</h2>
  <el-empty description="暂无医生" v-if="physicians.length === 0"></el-empty>
  <el-table :data="tableData" border stripe header-cell-class-name="headerBg">
<!--    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="username" label="用户名"></el-table-column>-->
    <el-table-column width="300px" label="医生信息">
      <template slot-scope="scope">
        <el-avatar style="margin-top: 10px; float: left" shape="circle" :size="80" :src="scope.row.photo"></el-avatar>
        <div style="float: left; margin-left: 40px; margin-top: 10px">
          <span style="color:#0d6efd; font-size: 20px">{{scope.row.nickname}}</span><br/>
          <span>{{scope.row.identity}}</span><br/>
          <span class="s1">评分 </span><span class="s1" v-if="scope.row.score === null">暂无评分</span>
          <span style="color: orange; font-size: 10px">{{scope.row.score}}</span><br/>
          <span class="s1" style="">问诊量 </span><span class="s2" v-if="scope.row.num === null">0</span>
          <span style="font-size: 10px; color: #409EFF">{{scope.row.num}}</span><br/>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="排班信息">
      <template slot-scope="scope">
          <el-button round border v-for="item in scope.row.stageList" :key="item.id" :label="item.id" :value="item.id" @click="onSubmit(scope.row,item.id)">{{item.date + " " + item.timePeriod}}</el-button>
      </template>
    </el-table-column>
<!--    <el-table-column prop="identity" label="身份"></el-table-column>
    <el-table-column prop="specialty" label="擅长" align="center" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="outline" label="简介" align="center" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="hospital.name" label="医院"></el-table-column>
    <el-table-column prop="department.name" label="科室"></el-table-column>
    <el-table-column prop="num" label="问诊量"></el-table-column>
    <el-table-column prop="score" label="评分"></el-table-column>-->
    <!--      <el-table-column prop="stId" label="就诊时间段"></el-table-column>-->
<!--    <el-table-column width="180px">
      <template slot-scope="scope">
        <el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
      </template>
    </el-table-column>-->
  </el-table>
  <div style="padding: 10px 0">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[2, 5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="num">
    </el-pagination>
  </div>

  <!--  医生信息-->
  <h2>科室医生</h2>
  <el-empty description="暂无医生" v-if="physicians.length === 0"></el-empty>
  <div v-else>
    <div style=" border: 1px solid beige; border-radius: 10px; margin-top: 10px; padding-left: 10px">
      <el-row :gutter="5">
        <el-col :span="6" v-for="phy in physicians" :key="phy.id" style="text-align: center">
          <el-card :body-style="{ padding: '0px' }">
            <el-avatar style="margin-top: 10px" shape="circle" :size="100" :src="phy.photo"></el-avatar>
            <!--                <img :src="dep.photo" class="image" style="width: 100px; height: 100px;">-->
            <div style="padding: 14px;">
              <span style="color: #0d6efd">{{phy.nickname }}</span> <span>{{phy.identity}}</span><br/>
              <span class="s1">{{phy.department.name}}</span><br/>
              <span class="s1">{{phy.hospital.name}}</span><br/>
              <!--评分与问诊量-->
              <span class="s1">评分 </span><span class="s1" v-if="phy.score === null">暂无评分</span>
              <span style="color: orange; font-size: 10px">{{phy.score}}</span>
              <span class="s1" style="margin-left: 5px">问诊量 </span><span class="s2" v-if="phy.num === null">0</span>
              <span style="font-size: 10px">{{phy.num}}</span>

              <div class="bottom clearfix" style="border-top: dashed gray 1px; margin-top: 5px">
              <span class="擅长" style="line-height:1.5; font-size: 10px;
                    width: 250px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;"
                    :title="phy.specialty"
              >擅长：{{ phy.specialty }}</span><br/>
                <el-button type="info" plain @click="handleOrder(phy)">挂号</el-button>
                <el-button type="primary" plain @click="handleWen">问诊</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "DepInfo",
  data() {
    return {
      department: {},
      physicians: {},
      hospital: {},
      tableData: [],
      total: 0,
      num: 0,
      form: {},
      pageNum: 1,
      pageSize: 5,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.request.get("/department/findById?id=" + this.$route.query.depId).then(res => {
        this.department = res
      })
      this.request.post("/hospital/findById?id=" + this.$route.query.hosId).then(res => {
        this.hospital = res
      })
      this.request.get("/physician/findPhy", {
        params: {
          hosId: this.$route.query.hosId,
          depId: this.$route.query.depId,
        }
      }).then(res => {
        //console.log(res)
        this.physicians = res.data
        this.total = res.total
      })
      this.findPhyStage()
    },
    onSubmit(row,staId){
      console.log(this.user.id)
      if (!this.user.id){
        this.$alert('请先登录！', '未登录', {
          confirmButtonText: '确定',
        });
      }else{
        this.form.hosId = row.hoId
        this.form.depId = row.deId
        this.form.phyId = row.id
        this.form.userId = this.user.id
        this.form.staId = staId
        this.form.num = this.getProjectNum() + Math.floor(Math.random() * 10000)
        console.log(this.form)
        this.request.post("/order/edit" ,this.form).then(res => {
          if (res) {
            this.$message.success("预约成功")
            this.$router.push("/front/Order")
          } else {
            this.$message.error("预约失败")
          }
        })
      }
    },
    // 获取当前日期的方法
    getProjectNum () {
      const projectTime = new Date() // 当前中国标准时间
      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1 // 获取中国区月份
      const Day = projectTime.getDate() // 获取几号
      var CurrentDate = String(Year)
      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month
      } else {
        CurrentDate += '0' + Month
      }
      if (Day >= 10) {
        CurrentDate += Day
      } else {
        CurrentDate += '0' + Day
      }
      return CurrentDate
    },
    findPhyStage(){
      this.request.get("/physician/findPhyStage", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          hosId: this.$route.query.hosId,
          depId: this.$route.query.depId,
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data
        this.num = res.total
      })
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.findPhyStage()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.findPhyStage()
    },
    handleOrder(phy){
      console.log(phy)
      this.$router.push({path: '/front/phyInfo', query: {physician: phy}})
    },
    handleWen(){
      this.$router.push("/front/im")
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>

</style>
